<template>
  <div>
    <div class="top">
      <el-row style="padding-top: 10px;margin-left: 10px">
        <el-col :span="10">
          <el-button type="primary" icon="el-icon-plus" @click="clear">新增关怀</el-button>
        </el-col>
        <el-col :span="4">
          <el-select placeholder="关怀类型" @change="changeState" v-model="types" style="width:166px;">
            <el-option
              v-for="item in options"
              :key="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="1" style="margin-top: 10px">
          <span style="color: #D6CCCF;">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
        </el-col>
        <el-col :span="7">
          <span style="color: #667B8F">搜索：</span>
          <el-input placeholder="关怀主题" v-model="search" @change="searchPage"
                    oninput="value=value.replace(/\s*/g, '')" suffix-icon="el-icon-search" style="width:260px"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData" :default-sort = "{prop: 'careDate', order: 'descending'}" style="width:100%">
      <el-table-column prop="careId" type="selection"></el-table-column>
      <el-table-column width="300" prop="careSubject" label="关怀主题">
        <template slot-scope="e">
          <span class="information-title">{{e.row.careSubject}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="careLink" label="联系人"></el-table-column>
      <el-table-column prop="customerByCustomId.cusName" label="客户"></el-table-column>
      <el-table-column width="120" sortable prop="careDate" label="日期">
        <template slot-scope="c">
          {{c.row.careDate | formatDate}}
        </template>
      </el-table-column>
      <el-table-column prop="careType" label="类型"></el-table-column>
      <el-table-column prop="empByEmployeesId.empName" label="所有人"></el-table-column>
      <el-table-column prop="empByEmployeesId.empName" label="执行人"></el-table-column>
      <el-table-column width="80" label="操作">
        <template slot-scope="s">
          <i class="el-icon-edit" title="修改" style="font-size:17px;cursor:pointer" @click="update(s.row.careId)"></i>
          <i class="el-icon-delete" title="删除" style="font-size:17px;cursor:pointer" @click="del(s.row.careId)"></i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog title="新增关怀" :visible.sync="dialogFormVisible" width="65%">
      <hr class="border-t-a"/>
      <el-form label-position="right" :model="customercare" :rules="rules" ref="customercare" label-width="80px" style="margin-left: 30px">
        <el-row>
          <el-col :span="23">
            <el-form-item label="关怀主题" prop="careSubject">
              <el-input v-model="customercare.careSubject"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="客户名称" prop="customerByCustomId.customId">
              <el-select v-model="customercare.customerByCustomId.customId"
                         value-key="customercare.customerByCustomId.customId"
                         filterable remote style="width:100%"
                         @change="customerByPerson"
                         placeholder="请选择客户">
                <el-option v-for="cus in customerList" :key="cus.customId"
                           :label="cus.cusName" :value="cus.customId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人">
                <el-select v-model="customercare.careLink"
                           value-key="customercare.careLink" filterable remote
                           placeholder="请选择联系人" style="width: 240px">
                  <el-option v-for="link in linkList" :key="link.cupName"
                             :value="link.cupName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :push="1">
            <el-form-item label="日期" style="margin-left: 18px" prop="careDate">
              <el-date-picker v-model="customercare.careDate" type="date" placeholder="选择日期" style="width:240px"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="执行人" prop="empByEmployeesId.employeesId">
              <el-select v-model="customercare.empByEmployeesId.employeesId"
                         value-key="customercare.empByEmployeesId.employeesId"
                         style="width:240px" filterable remote
                         placeholder="请选择执行人">
                <el-option v-for="e in empList" :key="e.employeesId"
                           :label="e.empName" :value="e.employeesId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :push="1">
            <el-form-item label="关怀类型" style="margin-left: 18px">
              <el-select v-model="customercare.careType" style="width: 240px" placeholder="请选择状态">
                <el-option
                  v-for="item in options"
                  :key="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="关怀内容">
              <el-input v-model="customercare.careContent" autosize type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="客户反馈">
              <el-input v-model="customercare.careTick" autosize type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="备注">
              <el-input v-model="customercare.careRemark" autosize type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2" :push="20">
            <el-button @click="addCare('customercare')" icon="el-icon-check">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 分页 -->
    <div class="limit">
      <el-pagination
        :current-page.sync="currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @current-change="changePage"
        @size-change="sizeChange">
      </el-pagination>
      <p></p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        customerList:[],  //客户列表
        linkList:[],      //联系人列表
        empList:[],       //员工列表
        types:'',     //下拉框
        search:'',    //搜索框
        //分页
        currPage: 1,     //当前页
        totalSize: 0,    //总条数
        pageSize: 5,     //页大小
        dialogFormVisible: false,
        customercare:{
          careId:'',
          careSubject:'',
          careLink:'',
          careDate:'',
          careEnroll:'',
          careType:'',
          careContent:'',
          careTick:'',
          careRemark:'',
          careDelete:'',
          customerByCustomId:{
            customId:'',
            cusName:''
          },
          empByEmployeesId:{
            employeesId:'',
            empName:''
          }
        },
        options: [{
          value: '选项1',
          label: '项目提醒'
        }, {
          value: '选项2',
          label: '活动提醒'
        }, {
          value: '选项3',
          label: '节日祝福'
        }, {
          value: '选项4',
          label: '生日祝福'
        }],
        rules: {
          careSubject: [
            { required: true, message: '请输入关怀主题', trigger: 'blur' },
            { min: 1, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'blur' }
          ],
          'customerByCustomId.customId': [
            {required: true, message: '请选择客户', trigger: 'change' },
          ],
          'empByEmployeesId.employeesId': [
            {required: true, message: '请选择执行人', trigger: 'change' },
          ],
          careDate: [
            {required: true, message: '请选择日期', trigger: 'change' }
          ]
        }
      }
    },
    created:function() {
      this.initData(this.types, this.search, this.currPage, this.pageSize);

      this.$axios.get("http://localhost:8088/crm/check-all"
      ).then(v=>{
        this.customerList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })

      this.$axios.get("http://localhost:8088/ser/check-emp"
      ).then(v=>{//员工
        this.empList = v.data;
      }).catch(v=>{
        alert("访问失败!"+v.data);
      })
    },
    methods: {
      initData(types, search, currPage, pageSize) {
        this.$axios.get("http://localhost:8088/car/care-page",
          {params: {types: types, search: search, currPage: currPage, pageSize: pageSize}}
        ).then(v => {
          this.tableData = v.data.rows;
          this.totalSize = v.data.total;
        }).catch(v => {
          alert("访问失败!" + v.data);
        })
      },
      changePage(currPage) {
        this.initData(this.types, this.search, currPage, this.pageSize);
      },
      changeState() {
        this.initData(this.types, this.search, this.currPage, this.pageSize);
      },
      searchPage() {
        this.initData(this.types, this.search, this.currPage, this.pageSize);
      },
      sizeChange (pageSize) { //改变页大小
        this.pageSize = pageSize;
        this.initData(this.types, this.search, 1, this.pageSize);
      },
      reset(){//重置
        this.types = '';
        this.search = '';
        this.initData(this.types, this.search, this.currPage, this.pageSize);
      },
      customerByPerson(){//根据客户查出联系人
        var person = this.customercare.customerByCustomId.customId;
        if(person != null && person != ''){
          this.$axios.get("http://localhost:8088/crm/check-link",
            {params:{person:person}}
          ).then(v=>{
            this.linkList = v.data;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }
      },
      addCare(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post("http://localhost:8088/car/save-care",{
              careId:this.customercare.careId,
              careSubject:this.customercare.careSubject,
              careLink:this.customercare.careLink,
              careDate:this.customercare.careDate,
              careEnroll:this.customercare.careEnroll,
              careType:this.customercare.careType,
              careContent:this.customercare.careContent,
              careTick:this.customercare.careTick,
              careRemark:this.customercare.careRemark,
              careDelete:this.customercare.careDelete,
              customerByCustomId:this.customercare.customerByCustomId,
              empByEmployeesId:this.customercare.empByEmployeesId
            }).then(v=>{
              this.$message.success("新增成功");
              this.dialogFormVisible = false;
              this.customercare = {
                careId:'',
                careSubject:'',
                careLink:'',
                careDate:'',
                careEnroll:'',
                careType:'',
                careContent:'',
                careTick:'',
                careRemark:'',
                careDelete:'',
                customerByCustomId:{
                  customId:'',
                  cusName:''
                },
                empByEmployeesId:{
                  employeesId:'',
                  empName:''
                }
              };
              //刷新数据
              this.initData(this.types, this.search, this.currPage, this.pageSize);
            }).catch(v=>{
              alert("访问失败!"+v.data);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      update(careId){
        this.$axios.get("http://localhost:8088/car/check-care",
          {params:{careId:careId}}
        ).then(v=>{
          this.dialogFormVisible = true;
          this.customercare = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      },
      del(careId){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("http://localhost:8088/car/delete-care",
            {params:{careId:careId}}
          ).then(v=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新数据
            this.initData(this.types, this.search, this.currPage, this.pageSize);
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      clear(){
        this.dialogFormVisible = true;
        this.customercare = {
          careId:'',
          careSubject:'',
          careLink:'',
          careDate:'',
          careEnroll:'',
          careType:'',
          careContent:'',
          careTick:'',
          careRemark:'',
          careDelete:'',
          customerByCustomId:{
            customId:'',
            cusName:''
          },
          empByEmployeesId:{
            employeesId:'',
            empName:''
          }
        }
      }
    },
    filters: {
      formatDate(time){
        let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
        let year   = date.getFullYear();
        let month  = date.getMonth()+1;
        let day    = date.getDate();
        let hour   = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
        return year+"-"+month+"-"+day;
        /*return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;*/
      }
    }
  }
</script>

<style scoped>
  .top{
    height:60px;
    background: white;
    box-shadow:#ccc 0px 0px 10px;
    margin-bottom: 10px;
  }
  .border-t-a {
    border-top: 1px solid #aaaaaa;
    margin-top: -20px;
    margin-bottom: 30px;
  }
  .limit{
    margin-top:10px;
    margin-left:340px;
  }
  .information-title {
    width: 300px;   /*一定要设置宽度，或者元素内含的百分比*/
    overflow:hidden; /*溢出的部分隐藏*/
    white-space: nowrap; /*文本不换行*/
    text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
  }
</style>
